<!DOCTYPE html>
<html>
<head>
	<title>网页计算器</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			font:700 24px/1.5 Arial;
		}
		body,ul,li,div,input{
			margin: 0;
			padding: 0;
		}
		.calculator{
			width:302px;
			background: #000;
			margin:10px auto;
			box-sizing:border-box;
			position: relative;
		}
		.calculator input{
			border:0;
			width:100%;
			height:84px;
			text-align:right;
			font:700 50px/84px Arial;
			background: #ccc;
			margin:10px 0 0 0 ;
			padding: 0 5px;
			box-sizing: border-box;
			
						background: -webkit-linear-gradient(#aaa,#483d34,#444); /* Safari 5.1 - 6.0 */
  			background: -o-linear-gradient(#aaa,#483d34,#444); /* Opera 11.1 - 12.0 */
  			background: -moz-linear-gradient(#aaa,#483d34,#444); /* Firefox 3.6 - 15 */
			background: linear-gradient(#d7f798,#b4d573,#d7f798); /* 标准的语法（必须放在最后） */
		}
		ul,li{
			list-style: none;
			box-sizing:border-box;
		}
		.calculator ul{
			padding: 0 0 10px 10px;
			overflow: hidden;
			position: relative;
		}
		.calculator ul li{
			display: block;
			width: 63px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			margin: 17px 10px 0 0;
			float: left;
			background: #ccc;
			border-radius: 6px;
			background: -webkit-linear-gradient(#aaa,black,#444); 
  			background: -o-linear-gradient(#aaa,black,#444); 
  			background: -moz-linear-gradient(#aaa,black,#444); 
 			background: linear-gradient(#aaa,black,#444); 
		}
		.calculator ul li:hover{
			background: -webkit-linear-gradient(#444,black,#666);
  			background: -o-linear-gradient(#444,black,#666); 
  			background: -moz-linear-gradient(#444,black,#666); 
 			background: linear-gradient(#444,black,#666); 
		}
		.calculator ul li a{
			display: block;
			width: 100%;
			height: 100%;
			color: #fff;
			text-decoration: none;

		}
		.calculator .btn1{
			background: -webkit-linear-gradient(#aaa,#483d34,#444); /* Safari 5.1 - 6.0 */
  			background: -o-linear-gradient(#aaa,#483d34,#444); /* Opera 11.1 - 12.0 */
  			background: -moz-linear-gradient(#aaa,#483d34,#444); /* Firefox 3.6 - 15 */
			background: linear-gradient(#aaa,#483d34,#444); /* 标准的语法（必须放在最后） */
		}
		.calculator .btn1:hover{
			background: -webkit-linear-gradient(#444,#483d34,#aaa); /* Safari 5.1 - 6.0 */
  			background: -o-linear-gradient(#444,#483d34,#aaa); /* Opera 11.1 - 12.0 */
  			background: -moz-linear-gradient(#444,#483d34,#aaa); /* Firefox 3.6 - 15 */
			background: linear-gradient(#444,#483d34,#aaa); /* 标准的语法（必须放在最后） */
		}
		.calculator .btn2{
			height: 97px;
			position: absolute;
			left: 229px;
			top: 170px;
			line-height: 97px;
			background: -webkit-linear-gradient(#ffdab9,#e56f06,#d85201); /* Safari 5.1 - 6.0 */
  			background: -o-linear-gradient(#ffdab9,#e56f06,#d85201); /* Opera 11.1 - 12.0 */
  			background: -moz-linear-gradient(#ffdab9,#e56f06,#d85201); /* Firefox 3.6 - 15 */
 			background: linear-gradient(#ffdab9,#e56f06,#d85201); /* 标准的语法（必须放在最后） */
		}
		.calculator ul .btn2:hover{
			background: -webkit-linear-gradient(#d85201,#e56f06,#ffdab9); /* Safari 5.1 - 6.0 */
  			background: -o-linear-gradient(#d85201,#e56f06,#ffdab9); /* Opera 11.1 - 12.0 */
  			background: -moz-linear-gradient(#d85201,#e56f06,#ffdab9); /* Firefox 3.6 - 15 */
 			background: linear-gradient(#d85201,#e56f06,#ffdab9); /* 标准的语法（必须放在最后） */
		}
		.calculator .btn3{
			width: 136px;
		}
		#formula{
			position:absolute;
			top:0;
			background:none;
			border:0;
			font:700 12px/1.5 Arial;
			width:100%;
			padding:3px 15px 0 5px;
			text-align:right;
			box-sizing: border-box;
			line-height: 1;
			height: 22px;
		}
	</style>
</head>
<body>
<div class="calculator">
	<input type="text" maxlength="9" readonly="readonly" class="f-text" name="" value="0">
	<ul>
		<li class="btn1"><a href="javascript:void(0);">c</a></li>
		<li class="btn1"><a href="javascript:void(0);">%</a></li>
		<li class="btn1"><a href="javascript:void(0)">÷</a></li>
        <li class="btn1"><a href="javascript:void(0)">×</a></li>
        <li><a href="javascript:void(0)">7</a></li>
        <li><a href="javascript:void(0)">8</a></li>
        <li><a href="javascript:void(0)">9</a></li>
        <li class="btn1"><a href="javascript:void(0)">-</a></li>
        <li><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li><a href="javascript:void(0)">6</a></li>
        <li class="btn1"><a href="javascript:void(0)">+</a></li>
        <li><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li class="btn2"><a href="javascript:void(0)">=</a></li>
        <li class="btn3"><a href="javascript:void(0)">0</a></li>
        <li><a href="javascript:void(0)">.</a></li>
	</ul>
	<input id="formula" type="text" readonly="readonly" value="" />

</div>
<script type="text/javascript">
	window.onload=function(){
		var reg=/[\+\-\*\/\%]/;
		  var clac=document.getElementsByClassName('calculator')[0];
		  var oIn=clac.getElementsByClassName('f-text')[0];
		  var formula=document.getElementById('formula');
		  var oA=clac.getElementsByTagName('a');
		  for(var i=0;i<oA.length;i++){
		  		oA[i].onclick=function(){
		  			switch(this.innerHTML){
		  				case 'c':
		  				formula.value='';
		  				oIn.value=0;
		  				break;
		  				case '+':
		  					count('+');
		  				break;
		  				case '-':
	  					count('-');
	  					break;
	  					case '×':
	  					count('*');
	  					break;
	  					case '÷':
	  					count('/');
	  					break;
	  					case '%':
	  					count('%');
	  					break;
	  					case '=':
					  		if(formula.value==''){
					  			if(!reg.test(oIn.value)) formula.value=oIn.value;
					  		}else{
					  			if(reg.test(oIn.value)){//输入是符号
					  				oIn.value=eval(formula.value+'0');
					  			}else{
					  				if(!/\d[\+\-\*\/\%]\d/.test(formula.value)){//不是1+1,可能是1
					  					if(!reg.test(formula.value)){
					  						formula.value=oIn.value;
					  					}else{
					  						formula.value=formula.value+oIn.value;
						  					oIn.value=eval(formula.value);
					  					}

					  				}
					  			}
					  		}
	  					 break;
		  				default:
		  					if(oIn.value.length>9) return;
		  					(oIn.value=='0'||reg.test(oIn.value))?oIn.value=this.innerHTML:oIn.value+=this.innerHTML;
		  				break;
		  			}
		  		}

		  }
		  function count(a){
		  	if(reg.test(formula.value)&&!/\d[\+\-\*\/\%]\d/.test(formula.value)){//包含符号如：1+,但不是1+1
					if(!reg.test(oIn.value)){//不是符号
		  				formula.value=eval(formula.value+oIn.value)+a;
		  				oIn.value=a;
		  			}else{
		  				formula.value=formula.value.substring(0,formula.value.length-1)+a;
		  				oIn.value=a;
		  			}
		  	}else{//不包含符号或为空，如：1
					formula.value=oIn.value+a;
		  			oIn.value=a;
		  	}
		  }





}

	//css3渐变
	//http://www.runoob.com/css3/css3-gradients.html
</script>
</body>
</html>